{extend name="common/header" /}

{block name='seo'}
<title>{$detail['title']}-{:config('site.title')}</title>
<meta name="description" content="{$detail['seo_description']}">
<meta name="keywords" content="{$detail['seo_keyword']}">
<meta property="og:title" content="{$detail['title']}-{:config('site.title')}">
<meta property="og:description" content="{$detail['desc']}-{:config('site.description')}">
{/block}

{block name='body_before'}
<link rel="stylesheet" type="text/css" href="/assets/css/video-detail.css?{:rand(1,99999)}"/>
<link rel="stylesheet" type="text/css" href="/assets/css/video-detail-dark.css?{:rand(1,99999)}"/>
<link rel="stylesheet" type="text/css" href="/assets/css/video-js.css"/>
<link href="/assets/css/video-js-sea.css" rel="stylesheet">
{/block}
{block name='body'}
<div class="header">
    <div class="header-left">
        <a title="{:config('site.title')}" href="/" class="header-icon">
            <img src="{:config('site.site_icon')}">
            <span>{:config('site.name')}</span>
        </a>
        <form method="get" action="{:url('filter')}" class="header-search">
            <i class="fa-search fa search-icon"></i>
            <input name="keyword" placeholder="搜索" class="header-search-input"/>
        </form>
    </div>
    <div class="header-right">
        <i class="fa fa-snapchat"></i>
    </div>
</div>
<div class="body">
    <video title="{$detail['title']}"
           id="video-player"
           class="video-js"
           controls
           preload="auto"
    >
        <source src="{$m3u8}" type="application/x-mpegURL"/>
        <p class="vjs-no-js">
            您的浏览器不支持播放该视频
        </p>
    </video>
    <div class="info">
        <div class="info-title"><h1>{$detail['title']}</h1></div>
        <div title="{$detail['desc']}" class="info-desc">
            {$detail['desc']}
        </div>
        <div class="info-column">
            {foreach $detail['chapter'] as $item}
                <a class="info-column-item {if $item['id']==$current_chapter_id}info-column-item-active{/if}" {if $item['id']!=$current_chapter_id}href="{:url('detail',array('id'=>$detail['id'],'chapter_id'=>$item['id']))}"{/if}>{$item['title']}</a>
            {/foreach}
        </div>
    </div>
</div>
<div class="mobile-info">
    <div class="mobile-info-title">
        <h1>{$detail['title']}</h1>
    </div>
    <div class="mobile-info-desc">
        {$detail['desc']}
    </div>
    <div class="mobile-info-column">
        {foreach $detail['chapter'] as $item}
         <a class="info-column-item {if $item['id']==$current_chapter_id}info-column-item-active{/if}" {if $item['id']!=$current_chapter_id}href="{:url('detail',array('id'=>$detail['id'],'chapter_id'=>$item['id']))}"{/if}>{$item['title']}</a>
        {/foreach}
    </div>
</div>
{/block}
{block name='script'}
<script src="/assets/js/frontend/videojs-contrib-hls.min.js"></script>
<script src="/assets/js/frontend/video.min.js"></script>
<script>
    var player = videojs('video-player', {
        controls: true,
        playbackRates: [0.5, 1, 1.5, 2], // 设置倍速选项
        responsive: true,
        fluid: false,
        autoplay: true,
    });
</script>
{/block}